<template>
	<view class="container">
		<view class="queryForm">
			<uni-forms ref="queryRef" :model="queryParams" label-width="70px" label-align="right">
				<uni-forms-item label="用户昵称">
					<uni-easyinput v-model="queryParams.userName" placeholder="请输入用户昵称" />
				</uni-forms-item>
				<uni-forms-item label="手机号">
					<uni-easyinput v-model="queryParams.phonenumber" placeholder="请输入手机号" />
				</uni-forms-item>
				<uni-forms-item label="状态">
					<xy-select v-model="queryParams.status" :data="sys_normal_disable" clearable />
				</uni-forms-item>
				<uni-forms-item label="用户部门">
					<xy-drawer-tree-select :data="deptSelectTree" v-model="queryParams.deptId" value-name="id"
						@change="handleQuery" />
				</uni-forms-item>
				<uni-forms-item label="操作">
					<button class="mini-btn xy-btn" type="primary" size="mini" @click="handleQuery()">搜索</button>
					<button class="mini-btn xy-btn" type="primary" size="mini" @click="resetQuery()">重置</button>
					<button class="mini-btn xy-btn" type="default" size="mini" @click="handleAdd()"
						v-if="proxy.$auth.hasPermi('system:user:add')">添加</button>
				</uni-forms-item>
			</uni-forms>
		</view>
		<!-- @iconClick="iconClick" -->
		<view v-for="(user,index) in userList" :key="index">
			<uni-card>
				<view class="uni-body">
					<view>
						<text>用户编号：</text>
						<text>{{ user.userId }}</text>
					</view>
					<view>
						<text>用户名称：</text>
						<text>{{ user.userName }}</text>
					</view>
					<view>
						<text>用户昵称：</text>
						<text>{{ user.nickName }}</text>
					</view>
					<view>
						<text>用户部门：</text>
						<dict-tag :options="deptSelectTree" :value="user.deptId" value-name="id" />
						<!-- <text>{{ user.deptName }}</text> -->
					</view>
					<view>
						<text>手机号：</text>
						<text>{{ user.phonenumber }}</text>
					</view>
					<view>
						<text>状态：</text>
						<dict-tag :options="sys_normal_disable" :value="user.status" />
						<xy-switch v-model="user.status" active-value="0" inactive-value="1"
							@change="handleStatusChange(user)" />
					</view>
					<view>
						<text>创建时间：</text>
						<text>{{ user.createTime }}</text>
					</view>
				</view>
				<view slot="actions" class="card-actions">
					<button class="mini-btn xy-btn" type="primary" size="mini" @click="handleUpdate(user)"
						v-if="proxy.$auth.hasPermi('system:user:edit')">编辑</button>
					<button class="mini-btn xy-btn" type="warn" size="mini" @click="handleDelete(user)"
						v-if="proxy.$auth.hasPermi('system:user:remove')">删除</button>
					<button class="mini-btn xy-btn" type="primary" size="mini" @click="handleResetPwd(user)"
						v-if="proxy.$auth.hasPermi('system:user:resetPwd')">重置密码</button>
				</view>
			</uni-card>
		</view>
		<uni-load-more :status="xlstatus" />
	</view>
</template>

<script setup>
	import {
		deptTreeSelect,
		listUser,
		changeUserStatus,
		delUser,
	} from '@/pages_work/api/system/user'
	import {
		ref,
		getCurrentInstance
	} from 'vue'
	import {
		onLoad,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app'
	const {
		proxy
	} = getCurrentInstance();
	const {
		sys_normal_disable,
		sys_user_sex
	} = proxy.useDict("sys_normal_disable", "sys_user_sex");
	/** 自定义组件支持的部门树结构 */
	const deptSelectTree = ref([]);
	/** 查询用户列表所需的参数 */
	const queryParams = ref({
		pageNum: 1,
		pageSize: 10,
		userName: undefined,
		phonenumber: undefined,
		status: undefined,
		deptId: undefined,
	});
	/** 用户总数 */
	const total = ref(0);
	/** 用户列表 */
	const userList = ref([]);
	/** 下拉状态 */
	const xlstatus = ref('more');

	/** 查询部门树 */
	const getDeptTree = () => {
		deptTreeSelect().then(res => {
			queryParams.value.deptId = res.data[0].id;
			deptSelectTree.value = res.data;
		})
	}

	/** 查询用户 */
	const getUserList = () => {
		listUser(queryParams.value).then(res => {
			userList.value = userList.value.concat(res.rows);
			total.value = res.total;

			if (res.total == undefined) {
				// 标记加载数据完成
				xlstatus.value = 'more';
			} else if (res.total <= userList.value.length) {
				// 标记加载数据完成
				xlstatus.value = 'noMore';
			} else {
				// 标记还有剩余数据
				xlstatus.value = 'more';
			}
		})
	}

	/** 搜索按钮操作 */
	function handleQuery() {
		xlstatus.value = 'more';
		queryParams.value.pageNum = 1;
		userList.value = [];
		getUserList();
	};

	/** 重置按钮操作 */
	function resetQuery() {
		// dateRange.value = [];
		proxy.resetForm("queryRef");
		queryParams.value = {
			pageNum: 1,
			pageSize: 10,
			userName: undefined,
			phonenumber: undefined,
			status: undefined,
			deptId: undefined,
		};
		handleQuery();
	};
	/** 用户状态修改  */
	const handleStatusChange = (row) => {
		let text = row.status === "0" ? "启用" : "停用";
		proxy.$modal.confirm('确认要"' + text + '""' + row.userName + '"用户吗?').then(function() {
			return changeUserStatus(row.userId, row.status);
		}).then(() => {
			proxy.$modal.msgSuccess(text + "成功");
		}).catch(function() {
			row.status = row.status === "0" ? "1" : "0";
		});
	};

	/** 添加用户信息 */
	const handleAdd = () => {
		uni.$once('update', function(){
			handleQuery()
		})
		proxy.$tab.navigateTo("form?title=添加用户&userId=");
	}

	/** 编辑用户信息 */
	const handleUpdate = (user) => {
		uni.$once('update', function(){
			handleQuery()
		})
		proxy.$tab.navigateTo("form?title=编辑用户&userId=" + user.userId);
	}

	/** 重置密码 */
	const handleResetPwd = (user) => {
		proxy.$tab.navigateTo("resetPwd?title=重置密码&userId=" + user.userId);
	}

	/** 删除按钮操作 */
	const handleDelete = (row) => {
		const userIds = row.userId;
		proxy.$modal.confirm('是否确认删除用户编号为"' + userIds + '"的数据项？').then(function() {
			return delUser(userIds);
		}).then(() => {
			handleQuery();
			proxy.$modal.msgSuccess("删除成功");
		}).catch(() => {});
	};

	/** 生命周期函数--下拉刷新 */
	onPullDownRefresh(() => {
		handleQuery()
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 1000)
	})

	/** 生命周期函数-上拉加载 */
	onReachBottom(() => {
		if (xlstatus.value == 'noMore' || xlstatus.value == 'loading') {
			// 如果没有更多数据或者正在加载数据，则不需要加载更多，直接返回
			return;
		}
		// 标记正在加载数据
		xlstatus.value = 'loading';
		queryParams.value.pageNum++;
		getUserList();
	})

	getDeptTree();
	handleQuery();
</script>

<style lang="scss">
	@import "@/static/scss/work/index.scss";
</style>